<template>
    <div class="box-border h-[100vh] bg-[#6392bfa6] flex flex-col justify-center items-center">
        <div class="absolute top-20 min-w-[1000px] h-[120px] flex flex-col ">
            <div class="font-bold w-full h-[85px] p-2 text-white text-center text-[50px] tracking-[35px]">北涝圩污水厂运营管理系统
            </div>
            <div
                class="w-full flex-1 p-1 font-bold text-white text-center text-[22px] tracking-[4px] word-spacing-[40px]">
                Beilaowei Sewage
                Plant Operation Management System</div>
        </div>
        <div class="min-w-[1000px] h-[320px] p-4  flex flex-row justify-center items-center">
            <div
                class="w-2/3 h-full bg-[url('../../assets/images/loginBg.jpg')] bg-[length:95%_auto] bg-no-repeat bg-center">

            </div>
            <div class="flex-1 h-full flex flex-col justify-center items-center  border-[#38bdf8]">
                <div
                    class="w-full h-full flex flex-col justify-center items-center shadow-xl shadow-gray-500/50 rounded">
                    <el-form :model="loginForm" @submit.native.prevent="handleLogin" class="login-form">
                        <h2 class="text-center text-[30px] mb-[20px] text-white font-[DINBold]">登录</h2>
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.username" placeholder="请输入用户名"
                                prefix-icon="el-icon-user"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"
                                prefix-icon="el-icon-lock"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin" class="login-button" round>登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const loginForm = reactive({
    username: 'admin',
    password: 'Qlsz0987!@'
});

const handleLogin = () => {
    if (loginForm.username === 'admin' && loginForm.password === 'Qlsz0987!@') {
        ElMessage.success('登录成功');
        router.replace({ path: '/sewagePlant' });
    } else {
        ElMessage.error('用户名或密码错误');
    }
};
</script>

<style scoped lang="scss">
.login-button {
    width: 100%;
}

:deep(.el-form-item) {
    margin-bottom: 20px !important;
}
</style>